<template>
    <div class="company-info">
        <div class="w">
            <div class="flex-row bg-white intro-wrapper">
                <img
                    src="~@/assets/images/company/company.png"
                    alt=""
                    width="50%"
                />
                <div class="content" style="text-align: justify">
                    <h2>湖北国网华中科技开发有限责任公司</h2>
                    <p>
                        湖北国网华中科技开发有限责任公司总部位于武汉东湖新技术开发区-中国光谷，是国内领先的大型企业管理咨询及信息化整体服务提供商，专注于能源行业、大型企业的数字化转型和能源管理服务。经过20年“管理+IT”研究与实践，已具备专业领域高级管理咨询服务能力，并通过国际软件研发最高等级的CMMI5认证。
                    </p>
                    <p>
                        在企业数字化转型服务领域，华中科技为企业提供了一揽子具有针对性的数字化转型解决方案，助力企业开展面向未来的业务变革、流程重组和价值重塑。
                    </p>
                    <p>
                        在智慧能源领域，华中科技“智慧能源研究院”开展了一系列前沿产品和技术研发工作，在电力市场化交易、园区能源互联网、终端能源管理等方面具备行业先进水平。
                    </p>
                </div>
            </div>
            <div class="ability">
                <div class="head1">资质实力</div>
                <div class="wrapper flex-row">
                    <div
                        class="box flex-item bg-white"
                        v-for="(item, index) in abilitiesData"
                        :key="index"
                        @mouseenter="activeIndex = index"
                        @mouseleave="activeIndex = null"
                    >
                        <h2>{{ '0' + (index + 1) }}</h2>
                        <img
                            :src="item.url"
                            alt=""
                            v-if="activeIndex !== index"
                        />
                        <img :src="item.active" alt="" v-else />
                        <p>{{ item.text }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="business">
            <div class="head1">业务版块</div>
            <div class="bg-wrapper">
                <div class="w card-wrapper">
                    <div
                        class="card bg-white"
                        v-for="(item, index) in businessData"
                        :key="index"
                    >
                        <div class="flex-row ali-cen">
                            <img :src="item.url" alt="" />
                            <h2>{{ item.title }}</h2>
                        </div>
                        <div class="desc">{{ item.text }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w cooperation">
            <div class="tabs">
                <span
                    @click="tabClick(index)"
                    :class="{ active: index === activeTabIndex }"
                    v-for="(item, index) in tabsData"
                    :key="index"
                    >{{ item }}</span
                >
            </div>
            <div class="content" v-if="activeTabIndex == 0">
                <el-image
                    v-for="(item, index) in customer"
                    :key="index"
                    :src="item"
                    fit="cover"
                >
                </el-image>
            </div>
            <div class="content" v-if="activeTabIndex == 1">
                <el-image
                    v-for="(item, index) in partner"
                    :key="index"
                    :src="item"
                    fit="cover"
                >
                </el-image>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: null,
                abilitiesData: [
                    {
                        text: 'ISO质量、环境、健康、信息安全、信息技术服务体系认证',
                    },
                    {
                        text: '工业需求侧服务资质',
                    },
                    {
                        text: '高新技术企业',
                    },
                    {
                        text: 'CMMI5国际顶级研发水平',
                    },
                    {
                        text: '自主知识产权，百余项软件著作权、专利、论文',
                    },
                ],
                businessData: [
                    {
                        title: '电网业务板块',
                        text:
                            '电网发展与战略规划 、电力交易与供电服务、项目管控与档案管理 、智慧库房与物资管理、数字化经营决策、安全生产管理',
                    },
                    {
                        title: '智慧能源板块',
                        text:
                            '市场化售电营销、需求侧能源管理、园区智慧能源、综合能源服务',
                    },
                    {
                        title: '发电业务板块',
                        text:
                            '工程项目管理、生产运行管理 、厂级实时监控、发电营销决策',
                    },
                    {
                        title: '售电业务板块',
                        text: '售电代理交易、代运维服务、节能服务、设备改造  ',
                    },
                    {
                        title: '非电业务板块',
                        text:
                            '数字化转型、互联网应用、政府服务、电子商务                                  ',
                    },
                ],
                tabsData: ['典型客户', '合作伙伴'],
                activeTabIndex: 0,
                customer: {},
                partner: {},
            }
        },
        methods: {
            tabClick(i) {
                this.activeTabIndex = i
            },
            initImgs() {
                let imgs1 = this.$importImgs(
                    require.context('@/assets/images/company', false, /dark\d.png$/)
                )
                let $imgs1 = this.$importImgs(
                    require.context(
                        '@/assets/images/company',
                        false,
                        /light\d.png$/
                    )
                )
                let imgs2 = this.$importImgs(
                    require.context('@/assets/images/company', false, /dark\d.png$/)
                )
                this.abilitiesData.forEach((item, index) => {
                    item.url = imgs1[index]
                    item.active = $imgs1[index]
                })
                this.businessData.forEach((item, index) => {
                    item.url = imgs2[index]
                })
                this.customer = this.$importImgs(
                    require.context('@/assets/images/company', false, /c\d\d.png$/)
                )
                this.partner = this.$importImgs(
                    require.context('@/assets/images/company', false, /p\d.png$/)
                )
            },
        },
        created() {
            this.initImgs()
        },
    }
</script>

<style lang="scss" scoped>
    .company-info {
        position: relative;
        top: -40px;
        z-index: 10;
        .intro-wrapper {
            color: #333333;
            box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.1);
            .content {
                position: relative;
                font-size: 14px;
                padding: 30px;
                h2 {
                    font-size: 22px;
                    font-weight: bold;
                }
                p {
                    font-weight: 400;
                    line-height: 28px;
                    margin-top: 15px;
                    text-indent: 2em;
                }
                &::before {
                    position: absolute;
                    content: '';
                    left: -25px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 0;
                    height: 0;
                    border-top: 25px solid transparent;
                    border-right: 25px solid #fff;
                    border-bottom: 25px solid transparent;
                }
            }
        }
        .head1 {
            margin: 80px 0 40px;
            font-size: 34px;
            font-weight: bold;
            text-align: center;
        }
        .ability {
            .box {
                padding: 20px;
                height: 242px;
                &:hover {
                    background: #1a8bff !important;
                    color: #fff;
                    h2 {
                        color: #fff;
                    }
                }
                & + .box {
                    margin-left: 10px;
                }
                h2 {
                    font-size: 24px;
                    font-family: DIN;
                    font-weight: bold;
                    color: #999999;
                    text-align: right;
                }
                p {
                    margin-top: 40px;
                }
            }
        }
        .business {
            .bg-wrapper {
                height: 496px;
                background: url('~@/assets/images/company/business.png') no-repeat;
                background-size: cover;
                display: flex;
                .card-wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    margin: auto;
                    .card {
                        padding: 35px 45px 0 30px;
                        height: 180px;
                        &:nth-child(1),
                        &:nth-child(2) {
                            width: calc((100% - 20px) / 2);
                        }
                        &:nth-child(2),
                        &:nth-child(4),
                        &:nth-child(5) {
                            margin-left: 20px;
                        }
                        &:nth-child(3),
                        &:nth-child(4),
                        &:nth-child(5) {
                            margin-top: 20px;
                            width: calc((100% - 40px) / 3);
                        }
                        h2 {
                            font-weight: bold;
                            margin-left: 15px;
                            font-size: 20px;
                        }
                        .desc {
                            margin-top: 15px;
                        }
                    }
                }
            }
        }
        .cooperation {
            .tabs {
                display: flex;
                font-size: 34px;
                font-weight: bold;
                justify-content: center;
                margin-top: 70px;
                span {
                    cursor: pointer;
                    padding: 10px 0;
                    & + span {
                        margin-left: 60px;
                    }
                    &.active {
                        border-bottom: 6px solid #1a8bff;
                    }
                }
            }
            .content {
                margin-top: 40px;
                .el-image {
                    width: 180px;
                    height: 80px;
                    margin-bottom: calc((100% - 180px * 6) / 5);
                    &:not(:nth-child(6n)) {
                        margin-right: calc((100% - 180px * 6) / 5);
                    }
                }
            }
        }
    }
</style>